<template>
  <n-card :bordered="false" class="appearance-container card-container">
    <template #header>
      <n-input class="w-80" placeholder="支持用户名，账号，备注查询" size="large">
        <template #prefix>
          <img :src="`${mainStore.commonImagePath}/icon_search.svg`" alt="icon_search">
        </template>
      </n-input>
    </template>
    <template #header-extra>
      <n-button size="large" type="primary" @click="linkState.showAddModal = true">
        <template #icon>
          <img :src="`${mainStore.commonImagePath}/link_union_btn.svg`" alt="link_union_btn">
        </template>
        新建子账户
      </n-button>
    </template>
    <n-data-table :bordered="false" :columns="unref(antiRedTable.columns)" :data="antiRedTable.dataList"
                  :pagination="antiRedTable.dataList.length > 0 && unref(mainStore.pagination)"
                  :row-key="row => row.short_url" flex-height size="large" @update:checked-row-keys="handleCheck">
      <template #empty>
        <n-space align="center" justify="center" vertical>
          <img :src="`${mainStore.commonImagePath}/empty_bg.svg`" alt="empty_bg">
          <n-text class="text-[#96A0B1]">暂无数据</n-text>
        </n-space>
      </template>
    </n-data-table>
  </n-card>

  <n-modal v-model:show="linkState.showAddModal" :auto-focus="false" :bordered="false" :show-icon="false"
           class="w-[480px]" preset="dialog" size="large" title="生成短链" to="#app"
           @on-after-leave="closeModal('addLinkFormRef')">
    <n-form ref="addLinkFormRef" :model="linkState.addLinkForm" label-placement="left">
      <n-form-item>
        <n-input v-model:value="linkState.addLinkForm.url" :autosize="{minRows: 7, maxRows: 7}"
                 placeholder="请输入需要防红的网址，每行一个，支持http和https协议" type="textarea"/>
      </n-form-item>
      <n-form-item>
        <n-select v-model:value="linkState.addLinkForm.type" placeholder="请选择防红类型" size="large"/>
      </n-form-item>
      <n-form-item label="请选择短网址：">
        <n-radio-group v-model:value="linkState.addLinkForm.short" name="short">
          <n-space>
            <n-radio value="Radio 1">Radio 1</n-radio>
            <n-radio value="Radio 2">Radio 2</n-radio>
            <n-radio value="Radio 3">Radio 3</n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
    </n-form>
    <n-space :size="16" justify="end">
      <n-button size="large" @click="linkState.showAddModal = false">取消</n-button>
      <n-button size="large" type="primary">确认</n-button>
    </n-space>
  </n-modal>
</template>

<script setup>
import {reactive, unref, h, getCurrentInstance} from 'vue'
import {useRouter} from 'vue-router'
import {NButton, NEllipsis, NInput, NSpace, NText, NSwitch} from 'naive-ui'
import {urlList, addUrl, modifyUrl, delUrl} from '@api/urlApi'
import {useDialog} from '@/hook/popup/dialog'
import {useMainStore} from '@/store'

const {proxy} = getCurrentInstance()
const router = useRouter()
const mainStore = useMainStore()
const currentPageImagePath = '/images/backstage-images/url-images'

const antiRedTable = reactive({
  columns: [
    {
      title: '状态', key: 'state', fixed: 'left',
      render(row) {
        return h(NSwitch, {}, {})
      }
    },
    {
      title: '用户名', key: 'username',
      render(row) {
        return h(NText, {
          strong: true,
          class: 'text-[rgba(0,0,0,0.6)]'
        }, {default: () => row.username})
      }
    },
    {
      title: '邮箱号', key: 'email',
      render(row) {
        return h(NText, {
          strong: true,
          class: 'text-[rgba(0,0,0,0.6)]'
        }, {default: () => row.email})
      }
    },
    {
      title: '账号密码', key: 'password',
      render(row) {
        return h(NText, {
          strong: true,
          class: 'text-[rgba(0,0,0,0.6)]'
        }, {default: () => row.password})
      }
    },
    {
      width: 85,
      render(row) {
        return h(NSpace, {}, {
          default: () => [
            h(NButton, {
              text: true,
              onclick() {
              }
            }, {
              default: () => h('img', {
                src: `${currentPageImagePath}/link_qrcode_normal.svg`,
                alt: 'link_qrcode_normal',
              }),
            }),
            h(NButton, {
              text: true,
              onclick() {
                navigator.clipboard.writeText(row.short_url)
                $message.success('已成功复制到剪切板。')
              }
            }, {
              default: () => h('img', {
                src: `${currentPageImagePath}/link_copy_normal.svg`,
                alt: 'link_copy_normal',
                title: '复制'
              })
            })
          ]
        })
      }
    },
    {
      title: '备注', key: 'remarks',
      render(row) {
        return h(NInput, {
          placeholder: '请输入备注',
          bordered: false,
          value: row.remarks
        })
      }
    },
    {
      title: '创建时间', key: 'create_time',
      render(row) {
        return h(NEllipsis, {
          class: 'text-[rgba(0,0,0,0.6)]'
        }, {default: () => row.create_time})
      }
    },
    {
      title: '操作', fixed: 'right', width: 140,
      render(row) {
        return h(NSpace, {}, {
          default: () => [
            h(NButton, {
              text: true,
              type: 'primary',
              onclick() {
                router.push(`/account/${row.id}`)
              }
            }, {
              default: () => '查看账户'
            }),
            h(NButton, {
              text: true,
              type: 'primary',
              onclick() {
                useDialog({
                  title: '删除',
                  content: '删除该账户后，账户数据也会被删除，确定删除？',
                  confirm() {
                  }
                })
              }
            }, {
              default: () => '删除'
            })
          ]
        })
      }
    },
  ],
  dataList: [
    {
      id: 1,
      state: '',
      username: '蜡笔小新',
      email: '18812612012@163.com',
      password: '',
      remarks: '',
      create_time: '2022-03-29 09:41:04',
    },
    {
      id: 2,
      state: '',
      username: '恶魔果',
      email: '18812612012@163.com',
      password: '',
      remarks: '',
      create_time: '2022-03-29 09:41:04',
    },
  ],
  checkedRowKeys: [],
})

const handleCheck = rowKeys => {
  antiRedTable.checkedRowKeys = rowKeys
}

const linkState = reactive({
  showAddModal: false,
  addLinkForm: {
    url: '',
    type: ''
  }
})

const closeModal = formRef => {
  proxy.$refs[formRef].restoreValidation()
}
</script>

<style lang="less" scoped>
.appearance-container {
  &:deep(.n-card-header) {
  }

  &:deep(.n-card__content) {
  }
}
</style>
